<script setup>
import { ref } from 'vue';
import Title from '@/components/title.vue';
import Video from './video.vue';
import videoSrc from '@/assets/img/videoDemo.mp4';
// 使用 require 来引入视频文件
// const videoSrc = ref(require('@/assets/img/videoDemo.mp4'));

</script>
<template>
    <div class="page">
        <div class="container">
            <Title title="摄像头视频监控"></Title>
            <div class="video-ist">
                <div class="video-item" v-for="(item, index) in 10" :key="index">
                    <!-- 传递视频源到 Video 组件 -->
                    <div class="video">
                        <Video :src="videoSrc" />
                    </div>
                    <div class="name">星关广场云台 {{ index + 1 }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.page {
    height: 100%;
    display: flex;
    margin-top: 50px;
    font-size: 20rem;
    width: 100%;

    .container {
        height: 100%;
        display: flex;
        flex-direction: column;

        .video-ist {
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            /* 允许换行 */
            justify-content: space-around;
            /* 视频项之间保持间距 */

            .video-item {
                width: calc(50% - 10px);
                /* 减去间距 */
                // margin-bottom: 20px;
                /* 视频项之间的垂直间距 */

                .video {
                    height: 100%;
                    /* 根据需要调整 */
                    width: 100%;
                }

                .name {
                    width: 100%;

                    color: #fff;
                    text-align: center;
                    overflow: hidden;
                    /* 确保溢出的内容被隐藏 */
                    white-space: nowrap;
                    /* 确保文本在一行内显示 */
                    text-overflow: ellipsis;
                    /* 使用省略号表示文字被截断 */
                }
            }
        }
    }
}
</style>